<template>
  <q-btn v-if="auth" color="grey-9" flat :round="!dense" class="size-16">
    <q-chip v-if="unreadNotifyCount" color="negative" floating style="right: inherit;left: 25px;top:8px;border-radius: 16px;">
      {{ unreadNotifyCount }}
    </q-chip>
    <q-icon name="notifications_none"/>
    <q-popover @show="reload(true)" @hide="opened = false">
      <div style="width: 360px">
        <q-tabs align="justify" v-model="type" color="white" class="border-bottom-1" text-color="black">
          <q-tab class="q-px-md" slot="title" name="all" label="全部"/>
          <q-tab class="q-px-md" slot="title" name="activity" label="活动"/>
          <q-tab class="q-px-md" slot="title" name="comment" label="评论"/>
          <q-tab class="q-px-md" slot="title" name="follow" label="关注"/>
          <q-tab class="q-px-md" slot="title" name="letter" label="私信"/>
        </q-tabs>
        <q-scroll-area @mousewheel.native.prevent.self v-if="opened" ref="scroll" class="relative-position" :style="{height: height+ 'px'}">
          <a-notifications ref="list" :notifications="querySet" :time="false" style="min-height: 360px">
          </a-notifications>
          <div class="relative-position">
            <a-loading :visible="loading" height="50px"></a-loading>
          </div>
          <!--<div>-->
            <!--<q-btn class="full-width" label="更多"/>-->
          <!--</div>-->
          <q-scroll-observable @scroll="handleScroll" />
        </q-scroll-area>
      </div>
    </q-popover>
  </q-btn>
</template>

<script>
  import {querySetInfiniteMixin} from '../../mixins/request'
  import {mapState} from 'vuex'

  export default {
    name: 'aNotify',
    mixins: [querySetInfiniteMixin],
    props: {
      dense: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    data() {
      return {
        api: '/api/user/notification_list/',
        type: 'all',
        height: 360,
        opened: false
      }
    },
    computed: {
      ...mapState(['unreadNotifyCount']),
      queryParams() {
        if (this.type !== 'all') {
          return {
            type: this.type
          }
        } else {
          return null
        }
      }
    },
    // mounted(){
    //   this.updateUnreadCount()
    //   this.$notifyInterval = setInterval(() => this.updateUnreadCount(), 30000)
    // },
    // beforeDestroy(){
    //   if (this.$notifyInterval){
    //     window.clearInterval(this.$notifyInterval)
    //   }
    // },
    watch: {
      type() {
        this.reload()
      },
      querySet (value, old) {
      }
    },
    methods: {
      handleScroll({position, direction, directionChanged, inflexionPosition}){
        if (direction === 'up') {
          return null
        }

        const listHeight = this.getListHeight()

        if (listHeight - this.height - position < 50){
          this.nextPage()
          this.$root.$emit('updateUnreadCount')
        }
      },
      getListHeight(){
        const el = this.$refs.list.$el
        return el.offsetHeight
      },
      async reload(resetType = false) {
        if (resetType) {
          this.type = 'all'
        }
        this.opened = true
        this.querySet = null
        this.page = 1

        await this.query()
      }
    }
  }
</script>

<style lang="stylus">
</style>
